<template>
  <n-flex :size="0" vertical class="h-vh max-h-vh">
    <!-- 头 -->
    <n-flex :size="0" align="center" justify="space-between" :wrap="false" class="py-[2px]">
      <!-- 左侧 -->
      <n-flex :size="0" align="center" :wrap="false">
        <div class="px-2">
            <n-gradient-text class="font-sans text-xl font-black">
                易
            </n-gradient-text>
        </div>
        <n-dropdown
            v-for="menu in topMenus"
            placement="bottom-start"
            trigger="click"
            size="small"
            :options="menu.children"
            @select="handleSelect"
        >
          <n-button quaternary size="small">{{ menu.label }}</n-button>
        </n-dropdown>
      </n-flex>
      <!-- 中间 -->
      <h3 type="info" class="font-sans text-base font-bold">
        {{ title }}
      </h3>
      <!-- 右侧 -->
      <div class="mr-2">
        <n-button 
          size="small" 
          quaternary
          @click="handleReturn"
          >
          返回
        </n-button>
      </div>
    </n-flex>
    <n-divider style="margin-top: 2px; margin-bottom: 2px;" ></n-divider>

    <!-- 内容 -->
    <!-- <div style="max-height: 600px;">
      <n-scrollbar x-scrollable>
        <router-view />
      </n-scrollbar>
    </div> -->
    <n-layout :native-scrollbar="false">
      <router-view v-slot="{ Component }">
          <keep-alive>
              <component :is="Component" :key="$route.name" v-if="$route.meta.keepAlive"/>
          </keep-alive>
          <component :is="Component" :key="$route.name" v-if="!$route.meta.keepAlive"/>
      </router-view>
    </n-layout>


  </n-flex>
</template>

<script lang="js" setup>
// import hotkeys from 'hotkeys-js';

// onMounted(() => {
//   hotkeys('ctrl+s', function (event, handler) {
//     event.preventDefault();
//     console.log(handler);
//     $naive.message.info('保存文件');
//   });
// });

// onUnmounted(() => {
//   hotkeys.unbind('ctrl+s');
//   console.log('unbind ctrl+s');
// });

const title = ref('')

const topMenus = [
  // {
  //   label: '文件',
  //   children: [
  //     {
  //       label: '打开文件',
  //       key: 'openFile'
  //     },
  //   ], 
  // },
  {
    label: '菜单',
    children: [
      {
        type: 'route',
        label: '周易全文',
        key: '/zhouyi/detail',
      },
      {
        type: 'route',
        label: '周易排卦',
        key: '/zhouyi/grid',
      },
      {
        type: 'route',
        label: '八宫变卦',
        key: '/zhouyi/gridByGong',
      },
      {
        type: 'route',
        label: '先天64卦',
        key: '/zhouyi/gridByXianTian',
      },
    ]
  },
]


const handleSelect = (key, item) => {
  title.value = item.label
  if (item.type === 'route') {
    $global.router.push(key)
  }
}

const handleReturn = () => {
  $global.router.go(-1)
}

</script>
